<pre class='metadata'>
Title: CSS Scroll Snap Module Level 2
Group: csswg
Shortname: css-scroll-snap
Level: 2
Status: ED
Prepare for TR: no
Implementation Report: https://wpt.fyi/results/css/css-scroll-snap
Work Status: Testing
ED: https://drafts.csswg.org/css-scroll-snap-2/
TR: https://www.w3.org/TR/css-scroll-snap-2/
Former Editor: Matt Rakow, Microsoft, w3cid 62267
Former Editor: Jacob Rossi, Microsoft, w3cid 45616
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Former Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
Abstract: This module contains features to control panning and scrolling behavior with “snap positions”.
Status Text:
 A test suite and an implementation report will be produced during the
 CR period.
Ignore MDN Failure: margin-longhands-logical
Ignore MDN Failure: margin-longhands-physical
Ignore MDN Failure: propdef-scroll-margin-block
Ignore MDN Failure: propdef-scroll-margin-inline
Ignore MDN Failure: scroll-margin
Ignore MDN Failure: padding-longhands-logical
Ignore MDN Failure: padding-longhands-physical
Ignore MDN Failure: scroll-padding
Ignore MDN Failure: propdef-scroll-padding-block
Ignore MDN Failure: propdef-scroll-padding-inline
Ignore MDN Failure: scroll-snap-align
Ignore MDN Failure: scroll-snap-stop
Ignore MDN Failure: scroll-snap-type
</pre>

Introduction {#intro}
=====================

	<em>This section is not normative.</em>

	<em>This is currently a delta spec over Scroll Snap 1.</em>

	Scroll experiences don't always start at the beginning. Interactions with
	carousels, swipe controls, and listviews often intend to begin from some element
	which might not be positioned at the beginning of the scroll container.
	JavaScript is required to make the scroll container initially scrolled
	to that element. By enabling CSS to specify that an element should be
	initially scrolled to, both users, page authors and browsers benefit.

	In addition to setting an initial scroll target,
	developers need insights and events into Scroll Snap.
	Events like which element is snapped on which axis,
	when the snap event is changing,
	when snap completes and conveniences for
	snapping to children programmatically.

First Layout {#first-layout}
------------

	This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it's first layout.

<!-- Big Text: examples

█████▌ █     █  ███▌  █     █ ████▌  █▌    █████▌  ███▌
█▌      █   █  ▐█ ▐█  ██   ██ █▌  █▌ █▌    █▌     █▌  █▌
█▌       █ █   █▌  █▌ █▌█ █▐█ █▌  █▌ █▌    █▌     █▌
████      █    █▌  █▌ █▌ █ ▐█ ████▌  █▌    ████    ███▌
█▌       █ █   █████▌ █▌   ▐█ █▌     █▌    █▌         █▌
█▌      █   █  █▌  █▌ █▌   ▐█ █▌     █▌    █▌     █▌  █▌
█████▌ █     █ █▌  █▌ █▌   ▐█ █▌     █████ █████▌  ███▌
-->

Motivating Examples {#examples}
===============================
		<div class="example">
				A carousel that starts scrolled to the middle image:
				<pre class="lang-css">
						.carousel {
								overflow-inline: auto;
						}
						.carousel .origin {
								scroll-initial-target: nearest;
						}
				</pre>

				<pre class="lang-html">
						&lt;div class="carousel">
								&lt;img src="img1.jpg">
								&lt;img src="img2.jpg">
								&lt;img src="img3.jpg" class="origin">
								&lt;img src="img4.jpg">
								&lt;img src="img5.jpg">
						&lt;/div>
				</pre>
		</div>
		<div class="example">
				A search bar is available when the user scrolls back to the top:

				<pre class="lang-css">
						.scrollport {
								overflow-block: auto;
						}

						main {
								scroll-initial-target: nearest;
						}
				</pre>

				<pre class="lang-html">
						&lt;div class="scrollport">
								&lt;nav>
										...
								&lt;/nav>
								&lt;main>
										...
								&lt;/main>
						&lt;/div>
				</pre>

				<!-- <figure>
						<img src="images/element_snap_positions.png" alt="">

						<figcaption>
								The layout of the scroll container’s contents in the example.
								The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
						</figcaption>
				</figure> -->
		</div>

Setting Where Scroll Starts {#properties-on-the-scroll-container}
=================================================================

The 'scroll-initial-target' property {#scroll-initial-target}
-------------------------------------------

ISSUE(11173): The name "scroll-initial-target" is chosen as the least worst option
which expresses that it should be scrolled to when its scroll container
first shows up on the page. A better name for the property would be very much welcome.

<h4 dfn export id="initial-scroll-target">
Initial scroll target</h4>

	The [=initial scroll target=] of a <a>scroll container</a> |scrollcontainer|
	is an element or pseudo-element
	whose 'scroll-initial-target'property is non-''scroll-initial-target/none''
	and whose nearest <a>scroll container</a> is |scrollcontainer|.
	When multiple such elements or pseudo-elements exist,
	user-agents should select the one
	which comes first in [=tree order=].
	When no such element or pseudo-element exists,
	|scrollcontainer|’s <a>initial scroll target</a> is null.

	<div algorithm="determine the initial scroll position from an initial scroll target">
		If the <a>initial scroll target</a> of a <a>scroll container</a> is not null,
		it  should be used to determine the <a>initial scroll position</a> of |scrollcontainer|
		by running the following steps:

		1. Let |target| be the <a>initial scroll target</a> for |scrollcontainer|.
		1. Let |position| be the result of running the steps to
			<a spec="cssom-view-1">determine the scroll-into-view position</a> of |target|
			with <var ignore>behavior</var> set to "auto",
			<var ignore>block</var> set to "start",
			<var ignore>inline</var> set to "nearest",
			and <var ignore>scrolling box</var> set to |scrollcontainer|.
		1. Set |scrollcontainer|'s <a>initial scroll position</a> to |position|.
	</div>


<h4 id="scroll-initial-target-propdef">scroll-initial-target Property Definition</h4>

	<pre class="propdef">
		Name: scroll-initial-target
		Value: none | nearest
		Initial: ''none''
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed Value: see individual properties
		Animation type: none
	</pre>

	<dl dfn-type=value dfn-for="scroll-initial-target">
		<dt><dfn>none</dfn>
		<dd>The element is not an [=initial scroll target=].
		<dt><dfn>nearest</dfn>
		<dd>The element is potentially an [=initial scroll target=]
			for its nearest [=scroll container=] ancestor.
	</dl>

<h4 id="scroll-initial-target-with-place-content">
Interaction with 'place-content'</h4>

	If a [=scroll container's=] [=initial scroll position=]
	is potentially set by both a [=content-distribution property=]
	and by 'scroll-initial-target' on a descendant,
	'scroll-initial-target' wins.

<h4 id="scroll-initial-target-fragment-navigation">
Post-first layout arrivals</h4>

	While the document is being [[html#updating-the-document|updated]],
	a <a>scroll container's</a> [=initial scroll target=] might arrive
	after that <a>scroll container</a> has been laid out.
	If this happens,
	user agents should still scroll to the [=initial scroll target=]
	unless the user agent has reason to believe
	the user is no longer interested
	in scrolling to the <a>initial scroll position</a>.


<!-- Big Text: :snapped

 █▌   ███▌  █    █▌  ███▌  ████▌  ████▌  █████▌ ████▌
███▌ █▌  █▌ █▌   █▌ ▐█ ▐█  █▌  █▌ █▌  █▌ █▌     █▌  █▌
 █▌  █▌     ██▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌     █▌  █▌
      ███▌  █▌▐█ █▌ █▌  █▌ ████▌  ████▌  ████   █▌  █▌
 █▌      █▌ █▌  ██▌ █████▌ █▌     █▌     █▌     █▌  █▌
███▌ █▌  █▌ █▌   █▌ █▌  █▌ █▌     █▌     █▌     █▌  █▌
 █▌   ███▌  █▌   ▐▌ █▌  █▌ █▌     █▌     █████▌ ████▌
-->

Styling Snapped Items {#styling-snapped}
=============================

Issue: The ':snapped' pseudo-class is being dropped in favor of a
<a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach.

The Snapped-element Pseudo-class: '':snapped'' {#snapped}
-------------------------------------------------------

The <dfn selector>:snapped</dfn> pseudo-class matches any scroll snap targets,
regardless of axis.
The longform physical and logical pseudo-class selectors
allow for more finite snapped children styling
as they can target an individual axis.

More specific options are defined as follows:

	<dl dfn-type=selector>
		<dt><dfn>:snapped-x</dfn>
		<dd>
			Matches the child snapped on the horizontal axis.

		<dt><dfn>:snapped-y</dfn>
		<dd>
			Matches the child snapped on the vertical axis.

		<dt><dfn>:snapped-inline</dfn>
		<dd>
			Matches the child snapped on the [=inline=] axis.

		<dt><dfn>:snapped-block</dfn>
		<dd>
			Matches the child snapped on the [=block=] axis.
	</dl>

Note: <a href="https://github.com/w3c/csswg-drafts/issues/6985#issuecomment-1049036401">Issue #6985</a><br>
Need to figure out resolution of the initial frame.

Snap Events {#snap-events}
===================

<!-- Big Text: events

█████▌ █▌   █▌ █████▌ █    █▌ █████▌  ███▌
█▌     █▌   █▌ █▌     █▌   █▌   █▌   █▌  █▌
█▌     █▌   █▌ █▌     ██▌  █▌   █▌   █▌
████   ▐▌   █  ████   █▌▐█ █▌   █▌    ███▌
█▌      █  ▐▌  █▌     █▌  ██▌   █▌       █▌
█▌      ▐▌ █   █▌     █▌   █▌   █▌   █▌  █▌
█████▌   ▐█    █████▌ █▌   ▐▌   █▌    ███▌
-->

{{scrollsnapchange}} and {{scrollsnapchanging}} {#scrollsnapchange-and-scrollsnapchanging}
--------------------------------------------

	CSS scroll snap points are often used as a mechanism to
	create scroll interactive "selection" components,
	where selection is determined with JavaScript intersection observers
	and a scroll end guestimate. By creating a built-in event,
	the invisible state will become actionable,
	at the right time, and always correct.

<h4 id="snapTarget">
Snap Targets</h4>

	A <dfn export>snap target</dfn> is an element or pseudo-element which the
	user-agent has [[css-scroll-snap-1#choosing|chosen]] to
	<a spec="css-scroll-snap-1" lt="scroll snap">snap</a>
	a given <a spec=css-scroll-snap lt="scroll snap container">snap container</a> to.

	<table class="data" id="eventhandlers" dfn-type=event dfn-for=SnapEvent>
		<thead>
			<tr>
				<th>Event
				<th>Interface
				<th>Targets
				<th>Description
		<tbody>
			<tr>
				<th><dfn>scrollsnapchange</dfn>
				<td>{{SnapEvent}}
				<td>scroll containers
				<td>Fired at the scrolling element or {{Document}} at the end of a scroll (before a {{scrollend}} event)
					or after a [[css-scroll-snap-1#re-snap|layout snap]]
					if the [=snap targets=] that the scrolling element or Document is snapped to changed.
			<tr>
				<th><dfn>scrollsnapchanging</dfn>
				<td>{{SnapEvent}}
				<td>scroll containers
				<td>Fired at the scrolling element or {{Document}} during scrolling (before a {{scroll!!event}} event),
					if the [=snap targets=] that the scrolling would cause the scroller to snap to are
					different from the [=snap targets=] selected at the last scrollsnapchanging event that was fired.
	</table>

<h4 id="scrollsnapchange">
{{scrollsnapchange}}</h4>

	{{scrollsnapchange}} indicates that the snap area to which a snap container is snapped along either axis has changed.
	{{scrollsnapchange}} is dispatched:

	<ol>
	<li>
		when a scrolling operation is <a spec="cssom-view-1" lt="scroll completed">completed</a>
		if, for either the block or inline axis, the
		[=snap target=] which the snap container is snapped to is different from the [=snap target=]
		it most recently snapped to in that axis. For snap containers with
		''scroll-snap-type/proximity'' strictness, the scroll may result in the snap
		container no longer being snapped to any [=snap target=]. [[css-scroll-snap-1#choosing]]
		describes the method a UA follows when choosing	between elements or pseudo-elements which are
		<a spec="css-scroll-snap-1" lt="scroll snap area">snap areas</a>.

	<li> if there is a change to a snap container's style such that it goes from
		having a non-''scroll-snap-type/none'' value for 'scroll-snap-type'
		to having a ''scroll-snap-type/none'' value or vice versa.

	<li> if, after a [[css-scroll-snap-1#re-snap|layout change]], the [=snap target=] to
		which a snap container is snapped to changes, regardless of whether there is
		a change in scroll position after the layout change.

	</ol>

	Scrolling operations always lead to {{scrollend}} events being fired. If a
	scrolling operation also results in a {{scrollsnapchange}} event being fired, the
	{{scrollsnapchange}} event should be fired before the {{scrollend}} event.

	Each
	<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
	one <dfn export>scrollsnapchangeTargetBlock</dfn> and one
	<dfn export>scrollsnapchangeTargetInline</dfn> in the block and inline axes
	respectively, each of which can either be null if the container is not
	snapped in that axis or the [=snap target=] to which the container is snapped.

	When asked to <dfn export for=Document>update scrollsnapchange targets</dfn>
	for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, run these steps:

	1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
	1. Let <var>blockTarget</var> be the <a>scrollsnapchangeTargetBlock</a> associated
		with |snapcontainer|.
	1. Let <var>inlineTarget</var> be the <a>scrollsnapchangeTargetInline</a> associated
		with |snapcontainer|.
	1. Let <var>blockScrollSnapchangingTarget</var> be the <a>scrollsnapchanging block-axis target</a>
		associated with |snapcontainer|.
	1. Let <var>inlineScrollSnapchangingTarget</var> be the
		<a>scrollsnapchanging inline-axis target</a> associated with |snapcontainer|.
	1. Let <var>snap targets changed</var> be a boolean flag that is initially false.
	1. If <var>blockTarget</var> is not the same [=snap target=] as <var>blockScrollSnapchangingTarget</var> or
		1. Set the <a>scrollsnapchangeTargetBlock</a> associated with |snapcontainer| to
			<var>blockScrollSnapchangingTarget</var>.
		1. Set <var>snap targets changed</var> to true.
	1. If <var>inlineTarget</var> is not the same [=snap target=] as <var>inlineScrollSnapchangingTarget</var>:
		1. Set the <a>scrollsnapchangeTargetInline</a> associated with |snapcontainer| to
			<var>inlineScrollSnapchangingTarget</var>.
		1. Set <var>snap targets changed</var> to true.
	1. If <var>snap targets changed</var> is true:
		1. If (|snapcontainer|, <code>"scrollsnapchange"</code>) is not already in <var>doc</var>'s
			<a>pending scroll events</a>:
			1. Append (|snapcontainer|, <code>"scrollsnapchange"</code>) to <var>doc</var>'s
				<a>pending scroll events</a>.

	Note: When snapping occurs on a scroller (either due to a layout change or a
	scrolling operation) the <a>scrollsnapchanging block-axis target</a> and <a>scrollsnapchanging inline-axis target</a>
	associated with that scroller are updated and represent the current snap targets
	of that scroller. This allows the <a>update scrollsnapchange targets</a> algorithm
	to use these [=snap targets=] to determine whether a {{scrollsnapchange}} event should be fired.

	<h4 id="scrollsnapchanging"> scrollsnapchanging </h4>
	{{scrollsnapchanging}} is dispatched:
	* during a scrolling operation, if the [=snap targets=] to which a
		 <a spec=css-scroll-snap lt="scroll snap container">snap container</a> would
		 <a spec="css-scroll-snap-1" lt="scroll snap">snap</a> (in either axis) changes, or
	* if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{scrollsnapchange}} event
		 is to be dispatched. In this case, as with the scrolling case, the {{scrollsnapchanging}} event
		 should be dispatched before the {{scrollsnapchange}} event.

	A scrolling operation might animate towards a particular position (e.g.
	scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic
	scrolls) or might directly track a user's input (e.g. touch scrolling, scrollbar
	dragging). In either case, the user agent [[css-scroll-snap-1#choosing|chooses]] an
	<dfn export>eventual snap target</dfn> in each axis to which the scroller will
	<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> after the scrolling operation
	reaches its intended scroll position.
	* In the former case, the intended scroll position is the scroll animation's
		 target scroll offset.
	* In the latter case, the intended scroll position is the current scroll offset as
		 determined by the user's input.

	{{scrollsnapchanging}} aims to let the web page know, as early as possible,
	that the scrolling operation will result in a change in the [=snap target=] the snap
	container is snapped to. The user agent should evaluate whether to trigger
	{{scrollsnapchanging}} based on the	<a>eventual snap target</a> to which the scroller would
	<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> were the scrolling operation
	to reach its intended scroll position.

	Note: Since scrollsnapchanging gives the web page hints about future snapping,
	the snapping hinted at by a scrollsnapchanging event might not materialize since it
	will be possible for subsequent scrolling input to further alter the snap
	container's scroll position and result in a different eventual snap target.

	Each
	<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
	one <dfn>scrollsnapchanging block-axis target</dfn>
	and one <dfn>scrollsnapchanging inline-axis target</dfn> in the block and inline axes
	respectively, each of which can either be null if the container is not
	snapping in that axis or the [=snap target=] to which the container is snapping.

	When asked to <dfn export for=Document>update scrollsnapchanging targets</dfn>
	for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, given an [=snap target=] newBlockTarget and an [=snap target=]
	newInlineTarget, run these steps:

	1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
	1. Let <var>blockTarget</var> be the <a>scrollsnapchanging block-axis target</a> that is
		associated with |snapcontainer|.
	1. Let <var>inlineTarget</var> be the <a>scrollsnapchanging inline-axis target</a> that is
		associated with |snapcontainer|.
	1. If <var>newBlockTarget</var> is not the same [=snap target=] as <var>blockTarget</var>:
		1. Set the <a>scrollsnapchanging block-axis target</a> associated with |snapcontainer| to
			<var>newBlockTarget</var>.
		1. If (|snapcontainer|, <code>"scrollsnapchanging"</code>) is not already in <var>doc</var>'s
			<a>pending scroll events</a>,
			1. Append (|snapcontainer|, <code>"scrollsnapchanging"</code>) to <var>doc</var>'s
				<a>pending scroll events</a>
	1. If <var>newInlineTarget</var> is not the same [=snap target=] as <var>inlineTarget</var>:
		1. Set the <a>scrollsnapchanging inline-axis target</a> associated with |snapcontainer| to
			<var>newInlineTarget</var>.
		1. If (|snapcontainer|, <code>"scrollsnapchanging"</code>) is not already in <var>doc</var>'s
			<a>pending scroll events</a>,
			1. Append (|snapcontainer|, <code>"scrollsnapchanging"</code>) to <var>doc</var>'s
				<a>pending scroll events</a>

	<h4 id="snap-events-on-layout-changes">Snap Events due to Layout Changes </h4>
	When a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
	|snapcontainer|, [[css-scroll-snap-1#re-snap|re-snaps]], run these steps:

	1. Let <var>newBlockTarget</var> be the [=snap target=] that |snapcontainer| has
		 <a spec="css-scroll-snap-1" lt="scroll snap">snapped</a>  to
		 in the block axis or null if it did not snap to any element.
	1. Let <var>newInlineTarget</var> be the [=snap target=] that |snapcontainer| has
		 <a spec="css-scroll-snap-1" lt="scroll snap">snapped</a> to
		 in the inline axis or null if it did not snap to any element or pseudo-element.
	1. Run the steps to <a>update scrollsnapchanging targets</a> with <var>newBlockTarget</var>
		 as newBlockTarget and <var>newInlineTarget</var> as newInlineTarget.
	1. Run the steps to <a>update scrollsnapchange targets</a> for |snapcontainer|.


SnapEvent interface {#snapevent-interface}
-------------------

<pre class="idl">
dictionary SnapEventInit : EventInit {
	Node? snapTargetBlock;
	Node? snapTargetInline;
};

[Exposed=Window]
interface SnapEvent : Event {
	constructor(DOMString type, optional SnapEventInit eventInitDict = {});
	readonly attribute Node? snapTargetBlock;
	readonly attribute Node? snapTargetInline;
};
</pre>

<dl dfn-type=attribute dfn-for=SnapEvent>
		: <dfn>snapTargetBlock</dfn>
		::
			The element that the snap container is snapped to in the block axis
			at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
			for the associated snap event. If the [=snap target=]
			corresponding to this was a pseudo-element, this will be the owning
			element of that pseudo-element.

		: <dfn>snapTargetInline</dfn>
		::
			The element that the snap container is snapped to in the inline axis
			at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
			for the associated snap event. If the [=snap target=]
			corresponding to this was a pseudo-element, this will be the owning
			element of that pseudo-element.
</dl>

For {{scrollsnapchange}} events,
the snap position is the position
already realized by the snap container after a scroll snap.
For {{scrollsnapchanging}} events
it is the snap position
that the snap container will eventually snap to
when the scrolling operation ends.

{{SnapEvent}}s do not bubble except when the event target is the {{Document}}.
{{SnapEvent}}s are not cancellable.


<!-- Big Text: Longhand

█▌     ███▌  █    █▌  ███▌  █▌  █▌  ███▌  █    █▌ ████▌
█▌    █▌  █▌ █▌   █▌ █▌  █▌ █▌  █▌ ▐█ ▐█  █▌   █▌ █▌  █▌
█▌    █▌  █▌ ██▌  █▌ █▌     █▌  █▌ █▌  █▌ ██▌  █▌ █▌  █▌
█▌    █▌  █▌ █▌▐█ █▌ █▌ ██▌ █████▌ █▌  █▌ █▌▐█ █▌ █▌  █▌
█▌    █▌  █▌ █▌  ██▌ █▌  █▌ █▌  █▌ █████▌ █▌  ██▌ █▌  █▌
█▌    █▌  █▌ █▌   █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌   █▌ █▌  █▌
█████  ███▌  █▌   ▐▌  ███▌  █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌
-->

Appendix A: Event Handlers {#event-handlers}
============================================================

ISSUE: This section should be moved to the HTML event handler
<a href="https://html.spec.whatwg.org/#event-handlers-on-elements,-document-objects,-and-window-objects">specification</a>.

Event handlers on elements, Document objects and Window objects {#event-handlers-on-elements-document-and-window-objects}
------------------------------------------------------------------------------------------------------

	The following are additional <a>event handlers</a> (and their corresponding <a>event handler event types</a>)
	that must be supported by all <a>HTML elements</a> as both <a>event handler content attributes</a>
	and <a>event handler IDL attributes</a>; and that must be supported by all {{Window}} objects and {{Document}} objects, as
	<a>event handler IDL attributes</a>:

	<table class="data" dfn-type=attribute dfn-for="Document,Element,Window">
		<tr>
			<th><a>Event handler</a>
			<th><a>Event handler event type</a>
		<tr>
			<td><dfn>onscrollsnapchange</dfn>
			<td>{{scrollsnapchange}}
		<tr>
			<td><dfn>onscrollsnapchanging</dfn>
			<td>{{scrollsnapchanging}}
	</table>


Extensions to the <code>GlobalEventHandlers</code> Interface Mixin {#interface-globaleventhandlers}
--------------------------------------------------------------------------------------------------------

	This specification extends the {{GlobalEventHandlers}} interface mixin from
	HTML to add <a>event handler IDL attributes</a> for {{SnapEvent}}s as defined
	in [[#event-handlers-on-elements-document-and-window-objects]].

	<h4 id="interface-globaleventhandlers-idl">IDL Definition</h4>

	<pre class="idl">
	partial interface mixin GlobalEventHandlers {
		attribute EventHandler onsnapchanged;
		attribute EventHandler onsnapchanging;
	};
	</pre>

Privacy Considerations {#privacy}
======================

The features in this spec have no known privacy implications.

Security Considerations {#security}
=======================

The features in this spec have no known security implications.
